<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品展示初级版本</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>商品展示</h2>
      <my-component-name name="iphone 15" price="9999"></my-component-name>
      <my-component-name name="MacBook Pro" price="14999"></my-component-name>
    </div>

    <!-- 定义一个组件模板 -->
    <template id="temp">
      <div>
        <h3>{{name}}</h3>
        <p>价格：￥{{price}}</p>
      </div>
    </template>

    <script type="text/javascript">
      //注册一个简单的全局组件
      Vue.component("my-component-name", {
        // ... 选项 ...
        template: "#temp",
        props: ["name", "price"], //接收父组件传递过来的属性
      });

      //创建一个根实例
      new Vue({
        el: "#app",
        data: {
          // 商品列表数据
          products: [
            {
              name: "iPhone 15",
              price: 999,
              description: "最新款苹果手机，性能强劲",
            },
            {
              name: "MacBook Pro",
              price: 1999,
              description: "高性能笔记本电脑，适合专业人士",
            },
            {
              name: "Apple Watch",
              price: 399,
              description: "智能手表，具备多种健康监测功能",
            },
          ],
        },
      });
    </script>
  </body>
</html>
